<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元素显示模式的转换</title>
    <style>
      a {
        width: 200px;
        height: 150px;
        background-color: pink;

        /* 
          display属性
          转换元素显示模式:
            block         转换成块元素
            inline        转换成行内元素
            inline-block  转换成行内块元素
        */
        /* a本来是行内元素,我们如果要设置它的宽度和高度,则可以把它转换成块元素 */
        display: inline-block;
      }

      div {
        /* 
          关于display还有一个用法:
            none            表示隐藏元素

            隐藏元素的各种方式:
            display: none;
            visibility: hidden;
            background-color: transparent;

            区别:
            display表示元素隐藏,页面上是没有这个元素的,所以不占用空间
            visibility: hidden;和transparent是让元素不可见,元素仍然是在页面上的,所以空间仍然占用
        */
        display: none;
        /* visibility: hidden; */
        width: 200px;
        height: 200px;
        background-color: pink;
        /* transparent表示透明 */
        /* background-color: transparent; */
      }
    </style>
  </head>
  <body>
    <a href="#">百度一下</a>
    <a href="#">百度一下</a>

    <hr />

    <div></div>
    <p>这是div下面的文字</p>
  </body>
</html>
